{% extends 'base.html' %}
{% load staticfiles %}


{% block  css-page %}

    <link href="{% static "vendor/datatables-plugins/dataTables.bootstrap.css" %}" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="{% static "vendor/datatables-responsive/dataTables.responsive.css" %}" rel="stylesheet">
{% endblock %}

{% block page-content %}
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">用户管理</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        <a  href="{% url 'account_add' %}"><button class="btn btn-primary " type="button">添加用户</button></a>
                    </p>
                </div>

                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            用户列表信息
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>

                                            <th>用户名</th>
                                            <th>姓  名</th>
                                            <th>邮  箱</th>
                                            <th>联系方式</th>
                                            <th>部  门</th>
                                            <th>角  色</th>
                                            <th>激  活</th>
                                            <th>操  作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="odd gradeX">
                                            {% for i in GetUser%}

                                            <td>{{i.username}}</td>
                                            <td>{{i.nickname}}</td>
                                            <td>{{i.email}}</td>
                                            <td>{{i.phone}}</td>
                                            <td class="center">{{i.dept}}</td>
                                            <td class="center">
                                            {% for k,v in list_role.items %}
                                                    {% if k == i.role %}
                                                             {{v}}
                                                    {%endif%}
                                            {% endfor %}
                                            </td>
                                            {%if i.is_active%}
                                                    <td class="center "><p class="glyphicon glyphicon-ok"></p></td>
                                            {%else%}
                                                    <td class="center"><p></p></td>
                                            {%endif%}
                                            <td class="center">
                                                <a class="btn btn-xs btn-info" href="/account/edit/{{i.id}}">编辑</a>
                                                <button class="btn btn-xs btn-danger" data-toggle="modal"  onclick="clickurl('{{i.id}}')"  data-target="#myModal" >删除</button>
                                                 <a class="btn btn-xs btn-warning" href="/account/setpasswd/{{i.id}}">修改密码</a>

                                            </td>

                                        </tr>
                                    {%endfor%}
                                    </tbody>
                                </table>

                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                   aria-labelledby="myModalLabel" aria-hidden="true">
                                   <div class="modal-dialog">
                                      <div class="modal-content">
                                         <div class="modal-header">
                                            <button type="button" class="close"
                                               data-dismiss="modal" aria-hidden="true">
                                                  &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                               删除提醒
                                            </h4>
                                         </div>
                                         <div class="modal-body">
                                            系统提示:您是否确认删除这条记录!!!!
                                         </div>
                                         <div class="modal-footer">
                                            <button type="button" class="btn btn-default"
                                               data-dismiss="modal">关闭
                                            </button>
                                             <button type="button" class="btn btn-primary formSubmit" id="postdel"> 删除 </button>
                                            <!--<a class="btn btn-primary" id="clickurl" > 删除</a>-->
                                         </div>

                                      </div><!-- /.modal-content -->
                                </div><!-- /.modal -->





                            </div>
                            <!-- /.table-responsive
                            <script>
                                function clickurl(url){

                                       $("#clickurl").attr("href","/account/del/"+url);
                                }
                            </script>
                                -->
                        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">系统提示</h4>
                              </div>
                              <div class="modal-body">
                                     <p id="getdata">ddddddd</p>
                              </div>
                            <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <a class="btn btn-primary" href="/account/list/">确定</a>
                                </div>
                            </div>

                            </div>
                          </div>
                        </div>

                            <script>
                               function clickurl(url){
                                    $("#postdel").click(function() {
                                        $.get("/account/del/"+url,
                                                 function (data) {
                                                    $('#myModal').modal('hide')
                                                    $("#getdata").html(data);
                                                    $('#myModal2').modal('show');
                                                });
                                    });
                                }
                          </script>



                        </div>
                        <!-- /.panel-body -->

                    </div>
                    <!-- /.panel -->
                </div>
            </div>
            <!-- /.row -->

{%endblock%}

    {% block  script-page %}
            <script src="{% static  "vendor/datatables/js/jquery.dataTables.min.js" %}"></script>
            <script src="{% static "vendor/datatables-plugins/dataTables.bootstrap.min.js" %}"></script>

            <!-- Custom Theme JavaScript -->

            <!-- Page-Level Demo Scripts - Tables - Use for reference -->
            <script>
            $(document).ready(function() {
                $('#dataTables-example').DataTable({
                        responsive: true,
                         "bSort": false,
                        "oLanguage":{
                                "sZeroRecords":"查询不到任何相关数据",
                                "sSearch": "搜索:",
                                "sLengthMenu": "每页显示 _MENU_ 条记录",
                                "oPaginate": {
                                          "sFirst":    "第一页",
                                          "sPrevious": " 上一页 ",
                                          "sNext":     " 下一页 ",
                                          "sLast":     " 最后一页 "
                                      },
                                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                        }
                });
            });
            </script>




    {% endblock %}
